<template>
    <div>
        <h1 style="text-align: center;">权限列表</h1>
        <router-link to="/auth/add">
            <el-button type="primary">添加</el-button>
        </router-link>
        
        <el-table
            :data="auths"
            style="width: 100%;margin-bottom: 20px;"
            row-key="_id"
            border
            :tree-props="{children: 'children'}">
            <el-table-column
            prop="name"
            label="名称"
            width="180">
            </el-table-column>
            <el-table-column
            prop="path"
            label="路径"
            width="180">
            </el-table-column>
            <el-table-column
            prop="icon"
            label="图标"
            width="180">
            </el-table-column>
            <el-table-column
            label="是否展示">
                <template slot-scope="scope">
                    <el-switch
                    @change="onChange(scope.row._id)"
                    v-model="scope.row.isShow"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
            label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 权限编辑 -->
        <el-dialog
        title="权限编辑"
        :visible.sync="dialogVisible"
        width="30%"
        >
          <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="权限名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="父权限">
                    <el-select v-model="form.parentId" placeholder="请选择父级">
                    <el-option label="无父级" value="0"></el-option>
                    <el-option v-for="auth in auths" :key="auth._id" :label="auth.name" :value="auth._id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="权限路径">
                    <el-input v-model="form.path"></el-input>
                </el-form-item>
                <el-form-item label="权限图标">
                    <el-input v-model="form.icon"></el-input>
                </el-form-item>
                <el-form-item label="是否显示">
                    <el-switch v-model="form.isShow"></el-switch>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="edit">修改</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {authList, authEdit, changeShowStatus, authDel} from '@/request'
export default {
    created() {
        // this.authTree()
        this.getAuthList()
    },
    data () {
        return {
            dialogVisible: false,
            data: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            form: {
                name: '',
                path: '',
                parentId: '',
                icon: '',
                isShow: false
            },
            auths: []
        }
    },
    methods: {
        // 切换是否展示
        onChange(id) {
            changeShowStatus(id).then(data => {
                let {msg, error_code} = data
                if(error_code === 200) {
                    this.$message({
                        message: msg,
                        duration: 1500,
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: msg,
                        duration: 1500,
                        type: 'error'
                    })
                }
            })
        },
        getAuthList() {
            authList().then(data => {
                // console.log(data);
                this.auths = data.data.authlist
            })
        },
        handleEdit(index, row) {
            this.dialogVisible = true
            this.form = row
        },
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 发请求删除
                authDel(row._id).then(data => {
                    let {msg, error_code} = data
                    if(error_code === 200) {
                        this.auths.splice(index, 1)
                        this.$message({
                            type: 'success',
                            message: msg
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        edit() {
            console.log(this.form);
            let data = JSON.parse(JSON.stringify(this.form))
            delete data.children
            // console.log(data);
            // return
            authEdit(data).then(data => {
                // console.log(data);
                let {msg, error_code} = data
                if(error_code === 200) {
                    this.dialogVisible = false
                    this.form = {
                        name: '',
                        path: '',
                        parentId: '',
                        icon: '',
                        isShow: false
                    }
                    this.$message({
                        message: msg,
                        duration: 1500,
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: msg,
                        duration: 1500,
                        type: 'error'
                    })
                }
            })
        }
    }
}
</script>

<style>
    
</style>
